import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Button, Icon } from 'antd';
import style from './style.css';
import * as actions from '../../../actions/openAudio';

@connect(
  (state, props) => ({
    openAudio: state.openAudio,
  }), actions
)
export default class extends Component {

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
  }

  componentDidMount() {
    const { update, location } = this.props;
    const { type } = location.query;
    update({
      type: +type,
    });
    if (+type === 1) {
      document.title = '音乐大厅';
    } else if (+type === 2) {
      document.title = '大师书房';
    }
  }

  render() {
    const { plus, minus, selectAll, removeAll, goDetail, openAudio } = this.props;
    const { type, playList, total, duration, all } = openAudio;
    const audioType = `audio${type}`;
    return (
      <div className={style.container}>
        <div className={style.banners}></div>
        <ul className={style.list}>
          {
            openAudio[audioType] && openAudio[audioType].map((item, index) =>
              <li className={style.items} key={item.id}>
                <div className={style.items_container}>
                  <div className={style.items_img}>
                    <img src={item.cover} />
                  </div>
                  <div className={style.items_content}>
                    <div className={style.items_title}>{item.name}</div>
                    <div className={style.items_time}>{item.duration}</div>
                  </div>
                  <div className={style.items_btns}>
                    {
                      !playList[item.id]
                        ? null
                        :
                        <span>
                           <Icon type="minus-circle-o" style={{ color: '#999' }} onClick={() => minus(item.id)} />
                           <span className={style.items_times}>{playList[item.id]}</span>
                        </span>
                    }
                    <Icon type="plus-circle-o" style={{ color: '#2ea7e0' }} onClick={() => plus(item.id)} />
                  </div>
                </div>
              </li>
            )
          }
        </ul>
        <div className={style.bottom}>
          <div className={style.bottom_info}>已选<b>{total}</b>首，共<b>{duration}</b>分钟</div>
          {
            !all
              ?
              <Button type="dashed" size="small" style={{ margin: '0 10px' }} onClick={selectAll}>全选</Button>
              :
              <Button type="dashed" size="small" style={{ margin: '0 10px' }} onClick={removeAll}>清空</Button>
          }
          <Button type="primary" size="large" disabled={duration === '00:00'} onClick={goDetail}>播放</Button>
        </div>
      </div>
    );
  }
}